<template>
  <div class="app-container">
    <el-form>
      <el-form-item label prop="banner_pic">
        <span class="xingxing must">院校banner：</span>
        <span style="color:#606266;font-size:12px;">（只能上传jpg/png文件，且不超过8M，大小为：1920px * 260px）</span>
        <el-upload
          :action="actionUpload"
          :on-preview="handlePictureCardPreview"
          :before-upload="beforeImageUpload8M"
          :on-remove="handleRemoveBannerPic"
          :on-success="successUploadBannerPic"
          :file-list="bannerPicArr"
          :limit="1"
          class="upload-demo"
          name="files"
          list-type="picture"
        >
          <el-button type="primary">点击上传1</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      actionUpload: 'http://ossiden.qqzaiqdx.cn/index.php/FileUpload?module=YouZhanCollege&type=image&show_info=true',
      bannerPicArr: [],
      addForm: {
        banner_pic: ''
      }
    }
  },
  methods: {
    successUploadBannerPic(file, fileList) {
      console.log(file)
      if (file[0].is_success === true) {
        this.addForm.banner_pic = file[0].file_path
      } else {
        this.bannerPicArr = []
        this.$message({
          showClose: true,
          message: file[0].error_msg,
          type: 'error'
        })
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.imgVisible = true
    },
    handleRemoveBannerPic(file, fileList) {
      this.addForm.banner_pic = ''
    },
    beforeImageUpload8M(file) {
      return this.helpers.beforeAvatarUpload(this, file, 8)
    }
  }
}
</script>
